<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交订单</title>
    <link href="../css/common.css" rel="stylesheet">
    <link href="../css/base.css" rel="stylesheet">
    <link rel="stylesheet" href="../carts/css/carts.css" />
    <link rel="stylesheet" href="css/order.css">
</head>
<body class="body">
<div id="header"></div>
<!--<div id="search_container"></div>-->
<!--<div id="nav_menu"></div>-->
<div id="nav-header">
    <div class="show-box" style="width: 1200px;margin: 0 auto">
        <div class="main-head">
            <span class="cart-logo" onclick="location.href='../view/index.html'" ></span>

        </div>
        <p class="my-cart"> 我的购物车</p>
        <div id="stepflex" class="stepflex">
            <dl class="first doing">
                <dt class="s-num s-num1"><span class="icon-flow first-flow"></span></dt>
                <dd class="s-text">我的购物车</dd>
                <dd></dd>
            </dl>
            <dl class="normal">
                <dt class="s-num1 s-num2"><span class="icon-flow second-flow"></span></dt>
                <dd class="s-text1">填写核对订单信息</dd>
            </dl>
            <dl class="last">
                <dt class="s-num1 s-num3"><span class="icon-flow third-flow"></span></dt>
                <dd class="s-text1">成功提交订单</dd>
            </dl>

        </div>
        <div class="ZZHT-clear"></div>
    </div>

</div>
<div class="ZZHT-container">
    <!--地址管理-->
        <div class="address-container">
            <p>收货信息</p>
            <ul class="address-list clearfloat">
                <li v-for="(item,index) in addList" :class="{'address-active':index==currentIndex}"  @click="getDetailAddress(item,index)" @mouseover="currentIndex=index " >
                    <!--<div class="cnm">-->

                    <!--</div>-->
                    <!--<p>{{item.isDefault}}</p>-->
                    <span class="select-address" v-show="item.isDefault">
                            默认地址
                    </span>
                    <div class="address-detail">
                        <p class="a_name"> {{item.userName}}</p>
                        <p class="a_tel">{{item.userPhone}}</p>
                        <p class="a_addr">{{item.provinceName+item.cityName+ item.areaName+item.userAddress}}</p>
                    </div>
                    <div class="defaltAddress" v-show="index==currentIndex" >
                        <p @click="setDefault(item)" v-show="!item.isDefault">设为默认</p>
                        <p @click="changeAddress(item)">修改</p>
                        <p @click="deleteAddress(item)">删除</p>
                    </div>
                </li>

                <li class="last-address" @click="alertAddress">
                    <div class="add-address">
                        <div class="add-address-icon">+</div>
                        <div class="add-address-word"><a href="#none">添加新地址</a></div>
                    </div>

                </li>

            </ul>
        </div>
    <!--订单模块-->
    <div class="order-detail">
        <!--标题-->
        <div class="order-header">
           <span>商品清单</span>
        </div>
        <!--列表详情-->
        <div class="order-list" v-for="o in orderList">
                <p class="order-list-header">{{o.shopName}}</p>
            <dl>
                <dt class="clearfloat">
                    <div><img :src="orImg(o.goodsImg)" :alt="o.goodsName"></div>
                    <div>
                        <span style="margin-bottom: 10px">{{o.goodsName}}</span>
                        <p v-for="v in o.specList"> <span>{{ v.catName}}:</span> <span style="margin-left: 5px;padding: 5px">{{v.itemName}}</span></p>

                    </div>
                    <div>x{{o.goodsNum}}</div>
                    <div>{{ returnFloat(o.goodsPrice*o.goodsNum )}}</div>
                </dt>
                <dd class="clearfloat">
                    <p> <span>备注 ：</span><input type="text" placeholder="请输入要备注的信息" v-model="o.orderRemarks" ></p>
                    <p class="order-carriage"><span>运费总计：</span><span>{{  returnFloat(o.freight)}}元</span></p>
                </dd>
            </dl>
        </div>
        <!--发票信息-->
        <div class="order-bill clearfloat">
            <p>发票信息</p>
            <div class="select-bill clearfloat">
                <p  :class="{'address-active':billNum==1}" @click="billNum=1"> 需要发票</p>
                <p :class="{'address-active':billNum==0}" @click="billNum=0">不需要发票</p>
                
            </div>
            
            <div class="bill-msg" v-show="billNum">
                <div class="bill-msg-header">发票抬头:</div>
                <input type="text" placeholder="请输入发票抬头" v-model="invoiceClient">
            </div>
        </div>
    </div>
    <!--结算窗口-->
    <div class="total-order">
        <div class="total-order-detail">
            <p><span class="count-product">商品件数: </span><span class="over-product">{{allNum}}件</span></p>
            <p> <span class="count-product">商品价格</span><span class="over-product">{{  returnFloat(allPrice)}}元</span></p>
            <p> <span class="count-product">运费</span><span class="over-product">{{addShow(defaulFreight) }}</span></p>
            <p > <span class="count-product">可获得积分</span><span class="over-product">{{defaultScore}}</span></p>
            <p class="must-total"> <span class="count-product">应付金额</span><span class="over-product">{{ returnFloat(allPrice) }}</span></p>

            <p class="select-msg"><span>{{addShow(finalCard.userName)}}</span> <span>{{addShow(finalCard.userPhone)}}</span>  </p>
            <p class="select-msg" v-cloak> {{addShow(finalCard.provinceName) +''+addShow(finalCard.cityName)+''+addShow(finalCard.areaName)+''+addShow(finalCard.userAddress)}}</p>
            <span class="order-btn" @click="subOrder">去结算</span>
        </div>
    </div>

    <!--alert-->
    <!--弹出增加地址-->
    <div class="alert-address" v-show="isAlert" style="display: none">

        <div class="alert-address-detail">
            <ul>
                <li class="alert-address-header">
                    <span>收货地址</span><span class="close" @click="isAlert=!isAlert">&times;</span>
                </li>
                <li class="alert-address-body" >
                    <label for="name" class="input-name">姓名:</label><input type="text" id="name" placeholder="请输入姓名" class="input-inner" v-model="addCard.userName" @blur="isValue(addCard.userName)">

                </li>
                <li class="alert-address-body"><label for="address" class="input-name">收货地址:</label>
                    <select name="address"  class="select-inner" @change="requestCity()" v-model="addCard.provinceId">

                        <option  v-for="pro in province " :value=" pro.areaId" v-cloak>{{pro.areaName}}</option>

                    </select>
                    <select name="address" class="select-inner" v-model="addCard.cityId" @change="requestArea">
                        <option v-for=" c in city" :value="c.areaId" v-cloak>{{c.areaName}}</option>
                    </select>
                    <select name="address"  class="select-inner" v-model="addCard.areaId">
                        <option v-for="a in area" :value="a.areaId" v-cloak>{{a.areaName}}</option>
                    </select>
                </li>
                <li class="alert-address-body">
                    <label for="" class="input-name"></label><input type="text" placeholder="请输入详细地址，如楼牌号，门牌号" class="input-inner" v-model="addCard.userAddress" @blur="isValue(addCard.userAddress)">
                </li>
                <li class="alert-address-body">
                    <label for="" class="input-name">联系电话:</label><input type="text" placeholder="请输入签约卡手机号" class="input-inner" v-model="addCard.userPhone" @blur="isValue(addCard.userPhone)">
                </li>
                <li class="alert-address-body">
                    <label for="" class="input-name">是否设为默认地址:</label> <i class="select-box" :class="{'yes-select-box':addCard.isDefault==0?false:true}" @click="addCard.isDefault=1"></i><span> 是</span> <i class="select-box" :class="{'yes-select-box':addCard.isDefault==1?false:true}" @click="addCard.isDefault=0"></i><span> 否</span>
                </li>
                <li class="alert-address-body" style="text-align: center"> <button class="request-order-btn" @click="addAddressCard"> 保存为收货地址</button></li>
            </ul>
        </div>
    </div>
</div>

<script src="../js/jquery.min.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/vue-resource.min.js"></script>
<script type="text/javascript" src="../js/qrcode.js"></script>
<script type="text/javascript" src="../plugin/layer/layer.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/common_view.js"></script>
<script type="text/javascript" src="../js/ljf_base.js"></script>
<script type="text/javascript" src="js/order.js"></script>

<script src="../js/lxs_jk.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>